<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>맥주 검색</title>
<script type="text/javascript" src="/world/script/jquery.js"></script>
<script type="text/javascript" src="/world/script/heart_control.js"></script>
<link href="/world/script/goalbeer_main.css" rel="stylesheet" type="text/css">
<link href="/world/script/goalbeer_content.css" rel="stylesheet" type="text/css">

<script type="text/javascript">
$(document).ready(function(){
	//점수표기 하트 동작 처리-hover, click
	heart_control();
//********************************************************************************************************************
//                                                     맥주검색 : 이름(한/영), 나라, 제조사로 검색
//********************************************************************************************************************
	//검색창 focus
	$("#search").on("focus", function(){
		$("#search").val("").css("color", "black");
	});
	//검색버튼 click
	$("#search_btn").on("click", function(){
		location.href="${initParam.rootPath}/liquor/beer_search_index.do?value="+$("#search").val();
	});
});
//********************************************************************************************************************
//																			맥주평가
//********************************************************************************************************************
//맥주 평가 등록(평가점수 1~5: 맥주평가, 0: 먹어볼 맥주) 및 업데이트
function rating(memberId, beerInfoId, grade){
	//alert(memberId+" "+beerInfoId+" "+grade);
	$.ajax({
		type: "POST",
		url: "${initParam.rootPath}/liquor/register_myBeer.do",
		data:{"memberId":memberId, "beerInfoId":beerInfoId, "grade":grade},
		dataType: "json",
		beforeSend:function(){},
		success:function(jarr){
			//나의 평가 반영
			var heart=""; //평가한 점수만큼 하트 개수 문자열을 담을 변수
			for(var i=0; i<grade; i++){ //평가한 점수만큼 하트 개수를 증가
				heart = heart+"♥";
			}
			$("#my_"+beerInfoId).empty();
			$("#my"+beerInfoId).empty();
			$("#my"+beerInfoId).html("<font color='black'>나의 평가</font> "+heart); //나의 평가 영역에 하트 문자열 출력
			
			//하트색 변경
			if(grade==0){
				allGray(beerInfoId);
				$("#my_"+beerInfoId).empty();
				$("#my"+beerInfoId).empty();
				$("#my"+beerInfoId).html("<font color='hotpink'>♥ 마실래요</font> "); //마실래요
			}else if(grade==1){
				allGray(beerInfoId);
				$("#heart1_"+beerInfoId).css("color", "red");
			}else if(grade==2){
				allGray(beerInfoId);
				$("#heart1_"+beerInfoId).css("color", "red");
				$("#heart2_"+beerInfoId).css("color", "red");
			}else if(grade==3){
				allGray(beerInfoId);
				$("#heart1_"+beerInfoId).css("color", "red");
				$("#heart2_"+beerInfoId).css("color", "red");
				$("#heart3_"+beerInfoId).css("color", "red");
			}else if(grade==4){
				allGray(beerInfoId);
				$("#heart1_"+beerInfoId).css("color", "red");
				$("#heart2_"+beerInfoId).css("color", "red");
				$("#heart3_"+beerInfoId).css("color", "red");
				$("#heart4_"+beerInfoId).css("color", "red");
			}else if(grade==5){
				allGray(beerInfoId);
				$("#heart1_"+beerInfoId).css("color", "red");
				$("#heart2_"+beerInfoId).css("color", "red");
				$("#heart3_"+beerInfoId).css("color", "red");
				$("#heart4_"+beerInfoId).css("color", "red");
				$("#heart5_"+beerInfoId).css("color", "red");
			}
		},
		error:function(){
			alert(xhr.status+"-"+xhr.statusText);
		}	
	});
}
//맥주평가 취소
function delete_rating(memberId, beerInfoId){
	$.ajax({
		type: "POST",
		url: "${initParam.rootPath}/liquor/delete_myBeer.do",
		data:{"memberId":memberId, "beerInfoId":beerInfoId},
		dataType: "json",
		beforeSend:function(){},
		success:function(jarr){
			//반영된 나의 평가 삭제
			$("#my_"+beerInfoId).empty();
			$("#my"+beerInfoId).empty();
			$("#my"+beerInfoId).html("<font color='black'>나의 평가</font> ?"); //취소 후 ? 출력
			//하트 색상 gray 변환
			allGray(beerInfoId);	
		},
		error:function(){
			alert(xhr.status+"-"+xhr.statusText);
		}	
	});
}
</script>
<style type="text/css">
/*검색창*/
#search_layer{margin-bottom: 30px;}
h3{font-size:22px;color:DarkSlateGray;}
#search{width: 250px;  height: 25px;  font-size: 15px;  color: gray; border:3px solid Gold;}
#search_btn{height:34px;}
/*검색결과 테이블*/
#beer_list_all, #beer_list_all_forLogin{margin:30px;align:center;font-size:14px;font-weight:bold;text-align:center;}
#beer_name{color:DarkSlateGray;font-size:16px;}
#beer_name{font-weight: bold;}
.beer_img{width:220px; height:230px;}
</style>
</head>
<body>
<div id="container" >
<!-- 로그인 폼 -->
<c:choose>
	<c:when test="${sessionScope.login_member==null}">
		<jsp:include page="/member/login_form.jsp"/>
	</c:when>
	<c:otherwise>
		<jsp:include page="/member/login_success.jsp"/>
	</c:otherwise>
</c:choose>
<!-- 메뉴 바 -->
<div id="header">
	<jsp:include page="/include/indexTop.jsp"/>
</div>

<!-- 카테고리 검색 메뉴(왼) -->
<div id="search_left_menu">
	<hr size="5" color="gold">
	CATEGORY
	<ul>
		<li><a href="${initParam.rootPath}/liquor/beer_search_sweetness.do">달콤한 맥주</a></li>
		<li><a href="${initParam.rootPath}/liquor/beer_search_bitterness.do">씁쓸한 맥주</a></li>
		<li><a href="${initParam.rootPath}/liquor/beer_search_refreshment.do">청량한 맥주</a></li>
		<li><a href="${initParam.rootPath}/liquor/beer_search_blackbeer.do">흑맥주</a></li>
		<li><a href="${initParam.rootPath}/liquor/beer_search_lowalcohol.do">낮은도수 맥주</a></li>
		<li><a href="${initParam.rootPath}/liquor/beer_search_highalcohol.do">높은도수 맥주</a></li>
		<li><a href="${initParam.rootPath}/liquor/beer_search_noalcohol.do">무알콜 맥주</a></li>
	</ul>
</div>

<!-- 검색창 및 검색결과(중앙) -->
<div id="search_content">
	<center>
	<h3>전세계 각국의 맥주를 검색하고, 평가해보세요!</h3>
	<table id="search_layer">
		<tr>
			<td><input type="text" id="search" value="이름, 나라, 제조사로 검색"></td>
			<td><input type="image" id="search_btn"  src="${initParam.rootPath}/image/main/search_button.jpg" ></td>
		</tr>
	</table>
	
	<c:choose>
		<c:when test="${sessionScope.login_member.memberId != null}"> <!-- 회원이 로그인 상태인 경우 : 평가점수 보이기 -->		
			<table id="beer_list_all_forLogin">
					<c:if test="${requestScope.result[0]==null}">
						<tr><td>검색 결과가 없습니다.</td></tr>
					</c:if>
					<c:forEach items="${requestScope.result }" var="beer">
						<tr>
							<td colspan="2" id="${beer.beerInfoName}"><hr></td>
						</tr>
						<tr>
							<td rowspan="7" width="250"><img class="beer_img" src="${beer.imageUrl }"> </td>
							<td id="beer_name"><b>${beer.beerInfoName }</b><br><b>${beer.beerInfoEngName }</b><hr color="DarkSlateGray" size="3"></td>
						</tr>
						<tr>
							<td>${beer.country }</td>
						</tr>
						<tr>
							<td>${beer.manufacturer }</td>
						</tr>
						<tr>
							<td>${beer.alcohol }%</td>
						</tr>
						<tr> <!-- 회원별 평가한 점수를 하트로 보여주는 tr -->
							<td>		
								<span class="my_rating" id="my${beer.beerInfoId }">
								<c:forEach items="${requestScope.result2 }" var="assess">
									<c:if test="${assess.beerInfoId==beer.beerInfoId }"> <!-- 해당하는 맥주를 찾는다 -->
										<c:choose>
											<c:when test="${assess.assessment == 0}"> <!-- 평가점수:0 - 마실래요 -->
												<span class="my_rating" id="my_${beer.beerInfoId }"><font color="hotpink" >♥ 마실래요</font></span>
											</c:when>
											<c:otherwise> <!-- 평가점수: 1~5 - 점수만큼 하트 출력 -->
												<span class="my_rating" id="my_${beer.beerInfoId }"><font color="black" >나의 평가</font>
												<c:forEach begin="1" end="${assess.assessment }">
													 ♥
												</c:forEach>
												</span>
											</c:otherwise>
										</c:choose>	
									</c:if>	
								</c:forEach>
								</span>
							</td>
						</tr>
						<tr>
							<td>
								<div id="heart_rating" >
									<a class="heart1" id="heart1_${beer.beerInfoId }" href="javascript:rating('${sessionScope.login_member.memberId}', '${beer.beerInfoId}', 1)" >♥</a>
									<a class="heart2" id="heart2_${beer.beerInfoId }" href="javascript:rating('${sessionScope.login_member.memberId}', '${beer.beerInfoId}', 2)" >♥</a>
									<a class="heart3" id="heart3_${beer.beerInfoId }" href="javascript:rating('${sessionScope.login_member.memberId}', '${beer.beerInfoId}', 3)" >♥</a>
									<a class="heart4" id="heart4_${beer.beerInfoId }" href="javascript:rating('${sessionScope.login_member.memberId}', '${beer.beerInfoId}', 4)" >♥</a>
									<a class="heart5" id="heart5_${beer.beerInfoId }" href="javascript:rating('${sessionScope.login_member.memberId}', '${beer.beerInfoId}', 5)" >♥</a>
								</div>
			        		</td>
						</tr>
						<tr>
							<td>
								<span class="etc_rating">
									<a class="delete_rating" id="delete_${beer.beerInfoId }" href="javascript:delete_rating('${sessionScope.login_member.memberId}', '${beer.beerInfoId }')">취소</a>
								</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="etc_rating">
									<a class="tobe_rating" href="javascript:rating('${sessionScope.login_member.memberId}', '${beer.beerInfoId }', 0)">마실래요</a>
								</span> 
								<div id="to_top">
									<a href="#header">▲Top</a>      
								</div>			
			        		</td>
						</tr>
					</c:forEach>
			</table>
		</c:when>
		<c:otherwise> <!-- 로그아웃 상태인 경우 -->
			<table id="beer_list_all">
			<c:if test="${requestScope.result[0]==null}">
				<tr><td>검색 결과가 없습니다.</td></tr>
			</c:if>
			<c:forEach items="${requestScope.result }" var="beer">
				<tr>
					<td colspan="2" id="${beer.beerInfoName}" ><hr></td>
				</tr>
				<tr>
					<td rowspan="4"  width="250"><img class="beer_img" src="${beer.imageUrl }"> </td>
					<td id="beer_name"><b>${beer.beerInfoName }</b><br><b>${beer.beerInfoEngName }</b><hr color="DarkSlateGray" size="3"></td>
				</tr>
				<tr>
					<td>${beer.country }</td>
				</tr>
				<tr>
					<td>${beer.manufacturer }</td>
				</tr>
				<tr>
					<td>
						${beer.alcohol }%
						<div id="to_top">
							<a href="#header">▲Top</a>      
						</div>
					</td>
				</tr>
			</c:forEach>
			</table>
		</c:otherwise>
	</c:choose>
	</center>
</div>

<!-- #링크 LIST (오른) -->
<div id="link_to">LIST<p>
	<c:forEach items="${requestScope.result }" var="beer">
		<a href="#${beer.beerInfoName}">${beer.beerInfoName }</a><br>
	</c:forEach>
</div>

<!-- footer -->
<div id="footer" >
	<jsp:include page="/include/indexBottom.jsp"/>
</div>
</div>
</body>
</html>